<template>
	<view class="top">
		<swiper class="swiper" circular display-multiple-items=1 style="height:500rpx" indicator-dots>
			<swiper-item v-for="(item,index) in message.pics" @click="preview(index)">
				<view class="swiper-item" >
					<img style="width:100%;height: 100%;"  :src="item.pics_big" alt="">
				</view>
			</swiper-item>
		</swiper>
		<view style="padding: 15rpx;box-sizing: border-box;padding-bottom: 100rpx;">
			<view class="goods_price">
				￥{{message.goods_price}}
			</view>
			<view class="goods_name">
				{{message.goods_name}}
			</view>
			<view class="goods_yun">
				快递:免运费
			</view>
			<rich-text :nodes="message.goods_introduce"></rich-text>
		</view>
		<view class="footer">
			<uni-goods-nav :fill="true"  :options="options" :buttonGroup="buttonGroup"  @click="onClick" @buttonClick="buttonClick" />
		</view>
	</view>
</template>

<script>
	import {mapState,mapGetters} from 'vuex'
	export default {
		data() {
			return {
				goods_id:'',
				message:{},
				gwcitem:{},
				gwcnum:0,
				defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
				options: [
					{
						icon: 'headphones',
						text: '客服'
					},
					{
						icon: 'cart',
						text: '购物车',
						info:0,
						infoColor:"white"
					},
				],
				buttonGroup: [{
				  text: '加入购物车',
				  backgroundColor: '#ff0000',
				  color: '#fff'
				},
				{
				  text: '立即购买',
				  backgroundColor: '#ffa200',
				  color: '#fff'
				}
				]
			}
		},
		onLoad(options){
			this.goods_id=options.goods_id
			this.getdetail()
			this.options[1].info=this.totle
		},
		computed:{
			...mapState(['mycart']),
			...mapGetters(['totle'])
		},
		methods: {
			async getdetail(){
				let {data}=await uni.$http.get('/api/public/v1/goods/detail',{goods_id:this.goods_id})
				this.message=data.message
				console.log(this.message)
				let {
					goods_id,
					goods_name,
					goods_price,
					goods_small_logo,
				}=data.message
				this.gwcitem={
					goods_id,
					goods_name,
					goods_price,
					goods_count:0,
					goods_small_logo,
					goods_state:true
				}
				console.log(this.gwcitem)
				if(this.message.pics.length==0){
					this.message.pics=[{pics_big:this.defaultPic}]
				}
			},
			onClick (e) {
				if(e.index==1){
					uni.switchTab({
						url:'/pages/layout/shoping/index'
					})
				}
				uni.showToast({
				  title: `点击${e.content.text}`,
				  icon: 'none'
				})
			},
			buttonClick (e) {
				if(e.index==0){
					this.gwcitem.goods_count=1
					this.$store.commit('addcart',this.gwcitem)
					this.options[1].info++
					uni.showTabBarRedDot({index:2});
				}else if(e.index==1){
					uni.switchTab({
						url:'/pages/layout/shoping/index'
					})
				}
			},
			preview(i){
				let imglist=this.message.pics.map(item=>item.pics_big)
				uni.previewImage({
					urls:imglist,
					current:i,
				});
			}
		}
	}
</script>

<style>
.top{
	width: 100%;
	height: 500rpx;
}
.swiper-item{height: 100%;}
.goods_price{
	font-size: 60rpx;color: rgb(197, 37, 33);
}
.goods_name{
	font-size: 30rpx;color: rgb(82, 83, 83);
	margin-top: 20rpx;
}
.goods_yun{
	font-size: 25rpx;color: rgb(143, 145, 145);
	margin:30rpx 0;
}
.footer{
	width: 100%;
	position: fixed;
	bottom: 0;
	left:0;
	
}
</style>
